<template>
  <div class="div-user-sum">
    <div class="div-user-top">
      <span>考核记录</span>
    </div>
    <el-input
      placeholder="请输入姓名"
      prefix-icon="el-icon-search"
      v-model="studentName"
      style="width:207px;height:40px;margin-left: 10px"
      clearable
    >
    </el-input>
    <el-button type="primary" @click="search" style="margin-left: 5px"
      >搜索</el-button
    >

    <!-- <el-button
      type="danger"
      :disabled="!multipleSelect || multipleSelect.length <= 0"
      @click="removeUsers"
      >批量删除<span v-show="multipleSelect && multipleSelect.length > 0"
        >（{{ multipleSelect.length }}）</span
      ></el-button
    > -->

    <!--<el-button type="success" @click="exportUser" icon="el-icon-download">导出用户</el-button>-->
    <div style="margin: 10px;">
      <el-table :data="recorddata" border>
        <!-- <el-table-column prop="username" label="用户名" align="center">
        </el-table-column> -->

        <el-table-column prop="studentName" label="姓名" align="center">
        </el-table-column>
        <el-table-column prop="title" label="考核名称"> </el-table-column>

        <el-table-column prop="score" label="成绩" align="center">
        </el-table-column>
        <el-table-column prop="count" label="考核次数" align="center">
        </el-table-column>
        <el-table-column
          prop="timeUsed"
          label="最后一次考核用时(秒)"
          align="center"
        >
        </el-table-column>

        <el-table-column prop="createTime" label="创建时间" align="center">
        </el-table-column>
        <el-table-column prop="deptName" label="所在组织" align="center">
        </el-table-column>
        <!--  -->
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="primary" @click="openxq(scope.row)" size="small"
              >详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div style="margin: 10px; text-align: center;">
        <el-pagination
          background
          @current-change="currentChange"
          :current-page="current"
          :page-size="limit"
          layout="total,  prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <!--   @click="addUserDialog = true"  -->
    <el-dialog
      title="详情"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      width="1220px"
      :visible.sync="showDialog"
      class="desxqbox"
    >
      <div class="maintitle">
        <div class="maintitlename">
          {{ recordsxq.scoreList[0].vrName }}
        </div>
        <div class="maintitledes">
          总用时:{{ recordsxq.totalTime }} 总步骤:{{ recordsxq.stepNum }}
        </div>
        <div class="maintitletime">总得分:{{ recordsxq.totalScore }}</div>
      </div>
      <div class="maintable">
        <el-table :data="recordsxq.dataStepDOList" border>
          <!-- <el-table-column prop="username" label="用户名" align="center">
        </el-table-column> -->

          <el-table-column prop="title" label="步骤" width="580">
          </el-table-column>
          <el-table-column label="得分/满分" align="center">
            <!-- 注意这里添加了 slot 属性 -->
            <template slot="default" slot-scope="scope">
              <!-- 这里可以使用 scope.row 获取当前行数据 -->
              {{ scope.row.score }}/{{ scope.row.maxScore }}
            </template>
          </el-table-column>

          <el-table-column label="操作时间" align="center">
            <template slot="default" slot-scope="scope">
              <!-- 这里可以使用 scope.row 获取当前行数据 -->
              {{ scope.row.startTime }}-{{ scope.row.endTime }}
            </template>
          </el-table-column>
          <el-table-column label="用时/规定用时(秒)" align="center">
            <template slot="default" slot-scope="scope">
              <!-- 这里可以使用 scope.row 获取当前行数据 -->
              {{ scope.row.timeUsed }}/{{ scope.row.expectTime }}
            </template>
          </el-table-column>
          <el-table-column prop="repeatCount" label="操作次数" align="center">
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getvrExamineRecord, getvrExaminedetails } from '@/api/simulation.js'
import { deptList } from '@/api/sysDept.js'
export default {
  name: 'EaxmList',
  data() {
    return {
      recorddata: [],
      roles: [],
      depts: [],
      majors: [],
      current: 1,
      limit: 10,
      total: 0,
      studentName: '',
      deptId: null,
      showDialog: false,
      recordsxq: {
        scoreList: [{ vrName: '' }]
      }
    }
  },
  created() {
    this.getExamList()
  },
  methods: {
    getExamList() {
      var data = {
        current: this.current,
        limit: this.limit,
        studentName: this.studentName ? this.studentName : null
      }
      getvrExamineRecord(data).then(async res => {
        this.recorddata = res.data.records
        this.total = res.data.total
      })
      deptList().then(res => {
        this.depts = res.children
        console.log('res', this.depts)
      })
    },

    search() {
      this.current = 1
      this.getExamList()
    },
    currentChange(page) {
      this.current = page
      this.getExamList()
    },

    selectionChange(val) {
      this.multipleSelect = val
    },

    openxq(item) {
      console.log('查询', item)
      var data = {
        userId: item.studentId,
        id: item.id
      }
      getvrExaminedetails(data).then(async res => {
        this.recordsxq = res.data
        this.showDialog = true
        console.log('查询详情', res.data)
      })
    }
  }
}
</script>
<style>
.maintable {
  height: 500px;
  overflow-y: auto;
}
.maintitle {
  width: 100%;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.maintitlename {
  width: 700px;
  font-size: 26px;
  font-weight: 800;
  /* max-width: 700px; */
  /* 文本溢出隐藏相关属性 */
  white-space: nowrap; /* 强制文本在一行内显示 */
  overflow: hidden; /* 超出容器部分隐藏 */
  text-overflow: ellipsis; /* 溢出部分显示省略号 */
}
.maintitledes {
  font-size: 20px;
  width: 320px;
  margin-left: 10px;
}
.maintitletime {
  font-size: 20px;
  width: 160px;
  box-sizing: border-box;
  padding-right: 10px;
  text-align: right;
}
</style>

<style scoped>
::v-deep .desxqbox .el-dialog__body {
  padding-top: 0px !important;
}
</style>
